<template>
  <dw-page-warpper>
    <DragCol ref="dragColRef" height="100%" width="100%" :leftPercent="20" :sliderWidth="8" sliderBgColor="#e6ecf5" sliderBgHoverColor="#e6ecf5">
      <template #left>
        <user-team-tree @currentNodeChange="currentNodeChange"></user-team-tree>
      </template>
      <template #right>
        <user-menu-form-grid ref="userGridRef" @handleSelect="handleSelect"></user-menu-form-grid>
      </template>
    </DragCol>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { DragCol } from '@/components/vue-resizer';
import UserTeamTree from './components/tree.vue';
import UserMenuFormGrid from './components/user.vue';
import type { ITeam } from '../team/team';
import { ref } from 'vue';
defineOptions({
  name: 'SysUser',
});
const userGridRef = ref();
const dragColRef = ref();
const currentNodeChange = (nodeData: ITeam) => {
  userGridRef.value.loadData(nodeData.id);
};
const handleSelect = (newValue: string) => {
  if (newValue != 'datagrid') {
    dragColRef.value.hiddenLeft();
  } else {
    dragColRef.value.showLeft();
  }
};
</script>
